<header>
    <button class="button-back">Back</button>
    <h2 class="title">Your Profile</h2>
    <section class="page-actions">
        <button class="button-save">Save</button>
    </section>
</header>

<section class="content no-padding">

    <header class="user-profile-header">
        <img id="user-cover" class="cover-image" src="{{#if cover}}{{cover}}{{else}}{{asset "shared/img/user-cover.png"}}{{/if}}" title="{{name}}'s Cover Image"/>

        <a class="edit-cover-image js-modal-cover button" href="#">Change Cover</a>
    </header>

    <form class="user-profile" novalidate="novalidate">

        <fieldset class="user-details-top">

            <figure class="user-image">
                <div id="user-image" class="img" style="background-image: url({{#if image}}{{image}}{{else}}{{asset "shared/img/user-image.png"}}{{/if}});" href="#"><span class="hidden">{{name}}'s Picture</span></div>
                <a href="#" class="edit-user-image js-modal-image">Edit Picture</a>
            </figure>

            <div class="form-group">
                <label for="user-name" class="hidden">Full Name</label>
                <input type="url" value="{{name}}" id="user-name" placeholder="Full Name" autocorrect="off" />
                <p>Use your real name so people can recognise you</p>
            </div>

        </fieldset>

        <fieldset class="user-details-bottom">

            <div class="form-group">
                <label for"user-email">Email</label>
                <input type="email" value="{{email}}" id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" />
                <p>Used for notifications</p>
            </div>

            <div class="form-group">
                <label for="user-location">Location</label>
                <input type="text" value="{{location}}" id="user-location" />
                <p>Where in the world do you live?</p>
            </div>

            <div class="form-group">
                <label for="user-website">Website</label>
                <input type="text" value="{{website}}" id="user-website" autocapitalize="off" autocorrect="off" />
                <p>Have a website or blog other than this one? Link it!</p>
            </div>

            <div class="form-group bio-container">
                <label for="user-bio">Bio</label>
                <textarea id="user-bio">{{bio}}</textarea>
                <p class="bio-desc">Write about you, in 200 characters or less.</p>
                <span class="word-count">0</span>
            </div>

            <hr />

        </fieldset>

        <fieldset>

            <div class="form-group">
                <label for="user-password-old">Old Password</label>
                <input type="password" id="user-password-old" />
            </div>

            <div class="form-group">
                <label for="user-password-new">New Password</label>
                <input type="password" id="user-password-new" />
            </div>

            <div class="form-group">
                <label for="user-new-password-verification">Verify Password</label>
                <input type="password" id="user-new-password-verification" />
            </div>
            <div class="form-group">
                <button type="button" class="button-delete button-change-password">Change Password</button>
            </div>

        </fieldset>

    </form>
</section>
